<script setup lang="ts">
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import "echarts-liquidfill";

let people = ref("211212人");

// 图表
let charts = ref();

onMounted(() => {
  console.log(echarts);
  // 获取图表的实例
  let myChart = echarts.init(charts.value);
  // 配置项
  myChart.setOption({
    // 标题
    title: {
      text: "实时统计",
    },
    // x轴
    // xAxis: {
    // },
    // // y轴
    // yAxis: {
    // },
    // 系列：数据和类型
    series: [
      {
        type: "liquidFill", // 水球图
        data: [0.6], // 数据
        radius: "90%", // 大小
        // 外边线的样式
        outline: {
          borderDistance: 0,
          itemStyle: {
            borderWidth: 5,
            borderColor: "#156ACF",
            shadowBlur: 20,
            shadowColor: "rgba(255, 0, 0, 1)",
          },
        },
      },
    ],
    // 布局
    grid: {
      // 距离父容器  左右上下的距离
      left: 0,
      right: 0,
      bottom: 0,
      top: 0,
    },
  });
});

defineOptions({
  name: "Tourist",
});
</script>

<template>
  <div class="box">
    <div class="top">
      <p class="title">实时统计</p>
      <p class="bg"></p>
      <p class="right">
        可预约人数
        <span> 99999 </span>
      </p>
    </div>
    <div class="number">
      <span v-for="(item, index) in people" :key="index">
        {{ item }}
      </span>
    </div>
    <div class="charts" ref="charts">111</div>
  </div>
</template>

<style scoped lang="scss">
.box {
  margin-top: 10px;
  margin-bottom: 10px;
  background: url("../../images/dataScreen-main-lb.png") no-repeat;
  background-size: cover;
  .top {
    margin-left: 20px;
    .title {
      font-size: 16px;
      color: #fff;
    }
    .bg {
      margin-top: 10px;
      background: url("../../images/dataScreen-title.png") no-repeat;
      width: 68px;
      height: 7px;
    }
    .right {
      margin-top: 10px;
      margin-right: 10px;
      font-size: 14px;
      color: #fff;
      float: right;
      span {
        margin-left: 10px;
        color: #ffd700;
      }
    }
  }

  .number {
    clear: both; // 清除浮动
    margin-top: 50px;
    margin-left: 20px;
    font-size: 14px;
    display: flex;
    span {
      flex: 1;
      height: 40px;
      line-height: 40px;
      text-align: center;
      margin-right: 10px;
      color: #29fcff;
      background: url("../../images/total.png") no-repeat;
      font-size: 25px;
    }
  }

  .charts {
    margin-top: 50px;
    margin-left: 20px;
    width: 100%;
    height: 200px;
  }
}
</style>
